<template>
  <div class="container">
    <div class="action">
      <span class="time">最近同步时间：{{ synchronisedTime }}</span>
      <el-tooltip
        effect="dark"
        content="未授权的功能"
        :disabled="this.$store.getters.isBtnAuth('synchronous')"
        :placement="'top'"
      >
        <div style="display: inline-block; margin: 0 5px">
          <el-button
            class="synchronize"
            size="mini"
            icon="icon-tongbu"
            @click="synchronize"
            :disabled="!this.$store.getters.isBtnAuth('synchronous')"
            >同步</el-button
          >
        </div>
      </el-tooltip>
    </div>
    <div class="list">
      <list-table-new
        @changeInput="changeInput"
        v-bind="tableSetting"
        ref="tableParam"
      ></list-table-new>
    </div>
  </div>
</template>

<script>
import {
  synchronizeInfo,
  queryBaseListNoPage,
  deptMangeSort,
  changeSort,
} from "@/api/operationManagement/dispatchManagement.js";
export default {
  data() {
    return {
      search: {},
      synchronisedTime: "", // 同步时间
      // 列表信息
      tableSetting: {
        showFilterBtn: false,
        showCustomBtn: false,
        showPagination: false,
        // 搜索框
        searchObj: {
          searchMethod: (params, sortStr) => {
            this.getTableData(params, sortStr);
            this.search = params;
          },
          queryData: {
            page: 1,
            pageSize: 15,
          },
          searchArr: [
            {
              type: "select",
              label: "主要设备类型",
              model: "equipmentType",
              option: this.$store.getters["dirtData"]("dispatch_type"),
            },
          ],
        },
        tableDataObj: {
          tableArr: [],
          total: null,
        },
        tableMethods: {
          //点击行的方法
          rowClick: (row) => {},
        },
        // 表头
        column: [
          {
            label: "设备管理单位",
            prop: "deptManageName",
          },
          {
            label: "操作",
            type: "button",
            width: "150",
            buttonArr: [
              {
                text: "上移",
                methods: (row) => {
                  this.upOrDownDept("UP", row);
                },
                isShow: (row) => {
                  return row.upDept;
                },
              },
              {
                text: "下移",
                methods: (row) => {
                  this.upOrDownDept("DOWN", row);
                },
                isShow: (row) => {
                  return row.downDept;
                },
              },
            ],
            textAlign: "center",
          },
          {
            label: "设备名称",
            prop: "equipmentName",
          },
          {
            label: "操作",
            type: "button",
            width: "150",
            buttonArr: [
              {
                text: "上移",
                methods: (row) => {
                  this.upOrDown("UP", row);
                },
                isShow: (row) => {
                  return row.up;
                },
              },
              {
                text: "下移",
                methods: (row) => {
                  this.upOrDown("DOWN", row);
                },
                isShow: (row) => {
                  return row.down;
                },
              },
            ],
            textAlign: "center",
          },
        ],
        // 合并表格
        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
          // 合并列下标对应columnIndex 以及 返回数组的第二个参数
          if (columnIndex === 1 || columnIndex === 2) {
            if (row.mergeLength) {
              // 如果有值,说明需要合并
              return [row.mergeLength, 1];
            } else {
              return [0, 0];
            }
          }
        },
      },
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      let equipmentType =
        this.$store.getters["dirtData"]("dispatch_type")[0].value;
      let data = { equipmentType };
      this.tableSetting.searchObj.queryData = data;
      this.tableSetting.searchObj.searchMethod(data);
    },
    async upOrDown(type, row) {
      let obj = {
        equipmentType: row.equipmentType,
        id: row.equipmentId,
      };
      row.sort ? (obj.sort = row.sort) : "";
      if (type == "UP") {
        obj.target = row.upRow.equipmentId;
      } else {
        obj.target = row.downRow.equipmentId;
      }
      await changeSort(obj);
      this.$message.success("操作成功");
      this.getTableData(this.search);
    },
    async upOrDownDept(type, row) {
      let obj = {
        deptManage: row.deptManage,
      };
      row.deptSort ? (obj.sort = row.deptSort) : "";
      if (type == "UP") {
        obj.targetDeptManage = row.upDept.deptManage;
      } else {
        obj.targetDeptManage = row.downDept.deptManage;
      }
      await deptMangeSort(obj);
      this.$message.success("操作成功");
      this.getTableData(this.search);
    },
    // 同步
    async synchronize() {
      await synchronizeInfo().then((res) => {
        if (res.code == 200) {
          this.$message.success(res.data);
          this.tableSetting.searchObj.queryData = this.search;
          this.tableSetting.searchObj.searchMethod(this.search);
        }
      });
    },
    // 搜索条件改变时
    changeInput(model, searchForm) {
      this.search = searchForm;
      this.getTableData(this.search);
    },
    // 查询列表信息
    async getTableData(params, sortStr) {
      let queryData = Object.assign({}, params);
      if (sortStr) {
        queryData.orders = sortStr;
      }
      let { data } = await queryBaseListNoPage(queryData);
      this.setData(data);
    },
    setData(data) {
      if (data.length) {
        this.synchronisedTime = data[0].lastSynTime;
        let indexList = [0];
        let sum = 0;
        let sumList = [];
        let sameDeptName = data[0].deptManageName;
        for (let i = 0; i < data.length; i++) {
          data[i].up = true;
          data[i].down = true;
          if (i == 0) {
            data[i].upRow = null;
            data[i].downRow = data[i + 1];
          } else if (i == data.length - 1) {
            data[i].upRow = data[i - 1];
            data[i].downRow = null;
          } else {
            data[i].upRow = data[i - 1];
            data[i].downRow = data[i + 1];
          }
          if (sameDeptName == data[i].deptManageName) {
            sum = sum + 1;
            if (data.length - 1 == i) {
              sumList.push(sum);
            }
          } else {
            sameDeptName = data[i].deptManageName;
            indexList.push(i);
            sumList.push(sum);
            sum = 0;
            i--;
          }
        }
        for (let i = 0; i < indexList.length; i++) {
          data[indexList[i]].mergeLength = sumList[i];
          data[indexList[i]].up = false;
          data[indexList[i] + sumList[i] - 1].down = false;
          if (i == 0) {
            data[indexList[i]].upDept = null;
            data[indexList[i]].downDept = data[indexList[i + 1]];
          } else if (i == data.length - 1) {
            data[indexList[i]].upDept = data[indexList[i - 1]];
            data[indexList[i]].downDept = null;
          } else {
            data[indexList[i]].upDept = data[indexList[i - 1]];
            data[indexList[i]].downDept = data[indexList[i + 1]];
          }
        }
      } else {
        this.synchronisedTime = "--";
      }
      this.$set(this.tableSetting, "tableData", data || []);
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  /deep/ .list-table-search--item .search-btn {
    display: none;
  }
  .action {
    position: absolute;
    right: 30px;
    text-align: right;
    .time {
      padding: 0 20px;
      font-size: 12px;
      color: #2c3e50;
    }
    .synchronize {
      position: relative;
      z-index: 1;
      margin: 1px;
    }
  }
  .el-button--primary {
    background-color: @kr-main-color;
    border-color: @kr-main-color;
  }
  .list {
    height: 100%;
  }
  .form {
    padding: 10px 50px 80px 50px;
  }
  /deep/ .search--btnOverflow {
    margin-bottom: 10px;
  }
  /deep/ .table-search--action {
    display: none;
  }
}
</style>